<template>
  <div
    class="dropdown-container"
    @mouseenter="handleEnter"
    @mouseleave="handleLeave"
  >
    <div
      class="title"
      :style="{
        lineHeight: lineHeight + 'px',
        color: titleColor,
        fontWeight: fontWeight,
        borderBottom: borderBottom,
      }"
      @click="clickHandler"
    >
      <slot></slot>
    </div>
    <div
      class="drop-menu"
      :style="{
        color: dropColor,
        background: dropBackground,
        display: dropDisplay && info? 'flex' : 'none',
        paddingLeft: p + 'vw',
        paddingRight: p + 'vw',
      }"
    >
      <div class="title-box">
        <div class="drop-item" v-for="(item, i) in info" :key="i">
          <a :href="item.link || null" class="drop-title">{{ item.title }}</a>
        </div>
      </div>
      <div class="submenu-box">
        <div class="submenu" v-for="(item, i) in info" :key="i">
          <a
            class="submenu-item"
            :href="subTitle.link || null"
            v-for="(subTitle, i) in item.subTitles"
            :key="i"
          >
            {{ subTitle.title }}
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    /**
     * info: array of objects like:
     * {
     *  title: text of main link
     *  link: title's link
     *  subTitles: an array of objects like what's displayed below
     * }
     * subTitle (item in subTitles): {
     *  title: text of main link
     *  link: title's link
     * }
     */
    info: {
      default: null,
    },
    lineHeight: {
      type: Number,
      default: 42,
    },
    color: {
      type: String,
      default: "#fff",
    },
    hoverColor: {
      type: String,
      default: "#fff",
    },
    dropColor: {
      type: String,
      default: "black",
    },
    dropBackground: {
      type: String,
      default: "#fff",
    },
    p: {
      default: 6
    },
    clickHandler: {
      type: Function,
      default: () => {},
    }
  },
  data() {
    return {
      titleColor: this.color,
      dropDisplay: false,
      fontWeight: "normal",
      borderBottom: "none",
    };
  },
  methods: {
    handleEnter() {
      this.titleColor = this.hoverColor;
      this.dropDisplay = true;
      this.fontWeight = "bold";
      this.borderBottom = "3px solid #fff";
    },
    handleLeave() {
      this.titleColor = this.color;
      this.dropDisplay = false;
      this.fontWeight = "normal";
      this.borderBottom = "none";
    },
  },
};
</script>

<style lang="scss" scoped>
.dropdown-container {
  /* width: 120px; */
  cursor: pointer;
}
.title {
  /* text-align: center; */
  height: 95%;
  margin-right: 1.8em;
}
a:hover {
  color: #285fce;
}

.drop-title {
  margin-right: 40px;
  font-weight: bold;
}
.submenu-item {
  display: inline-block;
  width: 8em;
}

$vertical-height: 3em;
.drop-item {
  height: $vertical-height;
  width: 7em;
}

a {
  color: inherit;
}
.drop-menu {
  width: 100%;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 30px;
  display: none;
  z-index: 10;
}
.submenu {
  height: $vertical-height;
}

.submenu:last-child {
  // margin-bottom: 0;
  height: 1em;
}
.drop-item:last-child {
  height: 1.5em;
}

.title-box {
  border-right: 1px solid black;
}

.drop-item:last-child {
  margin-bottom: 0;
}

.submenu-box {
  margin-left: 3em;
}
</style>
